<template>
<div class='sidebarStyle'>
  <div class="sidebar">
    <!--
    defalut-active:当前激活菜单的index
    unique-openeds：是否只保持一个子菜单的展开
    router：是否使用vue-router的模式，启用该模式会在激活导航时以index作为path进行路由跳转
    -->
    <!-- #242f42 -->
    <el-menu :default-active="onRoutes" class="el-menu-vertical-demo" unique-opened router 
      text-color="#000"
      background-color="#FFF"
      active-text-color="#4693a2">
      <template v-for="item in getSideItems">
        <template v-if="item.subs">
          <el-submenu :index="item.index" >
            <template slot="title" class='test'>
              <!-- <i :class="item.icon"></i> -->
              <icon :name="item.icon" color="#585858" :scale="scale"></icon>
              {{item.title}}
            </template>
            <el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index" >
              <i class='istyle'><img src="../../../static/img/形状-2.png"></img></i>
              {{subItem.title}}
            </el-menu-item>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="item.index" class='test'>
            <!-- <i :class="item.icon"></i> -->
            <icon :name="item.icon" color="#585858"  :scale="scale"></icon>
            {{item.title}}
          </el-menu-item>
          <!-- <li :index="item.index" class='nosubs-li'>
            <div class='nosubs-div'>
              <i class='istyle'><img src="../../../static/img/形状-2.png"></img></i>
              <i class='nosubs-i'></i>
              {{item.title}}
            </div>
          </li> -->
        </template>
      </template>
    </el-menu>
  </div>
  </div>
</template>

<script>
  /* eslint-disable quotes */

  import '../../../static/icon/icon.js'
  import apiLogin from '../../api/loginHome/apiLogin'
  import Icon from '../../../node_modules/vue-awesome/components/Icon'
  const sideData = require('../../json/origin-sidebar.json')
  export default {
    beforeMount () {
      // 显示侧边栏
      this.getSideItemsFro()
    },
    components: {Icon},
    data: function () {
      return {
        sideItems: sideData,
        scale: 1.7,
        realSideData: [],
        originSideData: sideData.businessPlat.items,
        originRoleList: [[0], [1, 8, 9, 10, 11], [2, 12, 13, 14], [3], [4], [5, 15, 16], [6, 17, 18], [7, 19, 20]],
        // originRoleList: [[0, 6, 7, 8, 9], [1, 10, 11, 12], [2], [3, 13, 14], [4, 15, 16], [5, 17, 18]],
        // roleIdList: []
        roleIdList: []
      }
    },
    methods: {
      getRoleIdList (testData) {
        let roleIdListTest = []
        for (let i = 0; i < testData.length; i++) {
          if (testData[i].menus.length > 0) {
            for (let m = 0; m < testData[i].menus.length; m++) {
              roleIdListTest.push(parseInt(testData[i].menus[m].permissionId) - 1)
            }
          } else {
            roleIdListTest.push(parseInt(testData[i].permissionId) - 1)
          }
        }
        return roleIdListTest
      },
      // 获得父节点ID
      getParentId () {
        let parentIdList = []
        let parentId = ''
        let index = ''
        for (let i = 0; i < this.roleIdList.length; i++) {
          index = this.indexOfOrigin(this.roleIdList[i], this.originRoleList)
          parentId = this.originRoleList[index][0]
          if (parentIdList.indexOf(parentId) === -1) {
            parentIdList.push(parentId)
          }
        }
        return parentIdList
      },
      indexOfOrigin (number, array) {
        for (let i = 0; i < array.length; i++) {
          if (array[i].indexOf(number) !== -1) {
            return parseInt(i)
          }
        }
      },
      indexOfParent (id, array) {
        for (let i = 0; i < array.length; i++) {
          if (parseInt(id) === parseInt(array[i].id)) {
            return parseInt(i)
          }
        }
      },
      getSide (roleIdList) {
        // 首先push父节点
        this.realSideData = []
        let parentIdList = this.getParentId()
        for (let i = 0; i < parentIdList.length; i++) {
          let index = parseInt(parentIdList[i])
          this.realSideData.push({
            id: parentIdList[i],
            index: this.originSideData[index].index,
            title: this.originSideData[index].title,
            icon: this.originSideData[index].icon
          })
          if (this.originSideData[index].subs) {
            this.realSideData[i].subs = []
          }
        }
        let parentIndex = 0
        let indexOrigin = 0
        let indexChild = 0
        let indexParentOrigin = 0
        for (let i = 0; i < roleIdList.length; i++) {
          indexOrigin = this.indexOfOrigin(roleIdList[i], this.originRoleList) // 子节点所属父节点在originRoleList的index
          indexParentOrigin = this.originRoleList[indexOrigin][0] // 子节点所属父节点在原始数据中的index,也是其id
          parentIndex = this.indexOfParent(this.originRoleList[indexOrigin][0], this.realSideData) // 该子节点id在最终sideData所属父节点的index
          if (this.originSideData[indexParentOrigin].subs) {
            indexChild = this.indexOfParent(roleIdList[i], this.originSideData[indexParentOrigin].subs) // 该子节点在原始side的subs中的位置
            this.realSideData[parentIndex].subs.push({
              id: roleIdList[i],
              index: this.originSideData[indexParentOrigin].subs[indexChild].index,
              title: this.originSideData[indexParentOrigin].subs[indexChild].title
            })
          }
        }
      },
      getSideItemsFro () {
        let para = {
          header: JSON.stringify({
            'token': sessionStorage.getItem('token')
          }),
          body: JSON.stringify({
            'adminId': sessionStorage.getItem('adminId')
          })

        }
        // this.getSide(this.roleIdList)
        apiLogin.getSideItems(para).then(res => {
          if (res) {
            console.log('888888888888888')
            console.log(res)
            if (res.body.result === 1000) {
              this.roleIdList = this.getRoleIdList(res.body.content.list)
              this.getSide(this.roleIdList)
            } else {
              this.$message({
                message: res.data.resultDesp,
                type: 'error'
              })
            }
          }
        })
        .catch(error => {
          this.$message({
            message: error,
            type: 'error'
          })
        })
      }
    },
    computed: {
      getSideItems () {
        // return this.originSideData
        return this.realSideData
      },
      onRoutes () {
        return this.$route.path.replace('/', '')
      }
    }
  }
</script>

<style scoped>
  .sidebar{
      display: block;
      position: absolute;
      width: 250px;
      left: 0;
      top: 70px;
      bottom:0;
      background: #2E363F;
  }
  .sidebar > ul {
      height:100%;
  }

</style>
<style>
 .sidebarStyle .sidebar {
   width: 219px !important;
 }
 .sidebarStyle .el-submenu__title {
   background-color: #F2F3F5 !important
 }
 .sidebarStyle .nosubs-li {
  display: list-item;
  margin: 0;
  padding: 0;
  text-align: -webkit-match-parent;
  color:#000000;
 }
 .sidebarStyle .test {
   background-color: #F2F3F5 !important
 }
 .sidebarStyle .nosubs-div {
  font-size: 14px;
  color: #303133;
  -webkit-transition: border-color .3s,background-color .3s,color .3s;
  transition: border-color .3s,background-color .3s,color .3s;
  box-sizing: border-box;
  background-color: #F2F3F5;
  padding-left: 20px; color: rgb(0, 0, 0);
 }
 .sidebarStyle .nosubs-i {
 }
 
 .istyle:
</style>
